import React, { Component, Fragment } from 'react';
import * as routerRedux from 'react-router-redux';
import { connect } from 'dva';
import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Popconfirm, Input, Button, Divider, Table,Col,DatePicker  } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { bookColumns } from './bookTable';
import styles from './BookList.less';
import {HOST_URL}from "../../utils/utils"
const FormItem=Form.Item;
export default @connect(({ active, loading }) => ({
  active,
  loading: loading.models.list,
}))
@Form.create()
class BookList extends Component {
  state={
    formValues:[]
  }
  componentDidMount() {
    this.fetchMore();
  }
  fetchMore = () => {
    const id=this.props.match.params.id;
    this.props.dispatch({
      type: 'active/fetchBook',
      payload: {
        activityId:id
      },
    });
  };
  downExcel=()=>{
    window.open(`${HOST_URL}/admin/activity/attend/users/excel/${this.props.match.params.id}`);
  }
  handleFormReset = () => {
    const {form, dispatch} = this.props;
    form.resetFields();
    this.setState({
      formValues: {},
    });
    dispatch({
      type: 'active/fetchBook',
      payload: {
        count: 5,
      },
    });
  };
  handleSearch = e => {
    e.preventDefault();
    const {dispatch, form} = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
        beginDate: fieldsValue.beginDate && fieldsValue.beginDate.valueOf(),
        endDate: fieldsValue.endDate && fieldsValue.endDate.valueOf(),
      };
      this.setState({
        formValues: values,
      });
      dispatch({
        type: 'active/fetchBook',
        payload: {
          count: 5,
        },
      });
    });
  };
  renderBookForm() {
    const {
      form: {getFieldDecorator},
    } = this.props;

    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{md: 8, lg: 24, xl: 48}}>
          <Col md={6} sm={24}>
            <FormItem label="姓名">
              {getFieldDecorator('name')(<Input placeholder="请输入"/>)}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <FormItem label="开始时间">
              {getFieldDecorator('beginDate')(
                <DatePicker placeholder="请输入活动开始时间"/>
              )}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <FormItem label="结束时间">
              {getFieldDecorator('endDate')(
                <DatePicker placeholder="请输入活动结束时间"/>
              )}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{marginLeft: 8}} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }
  render() {
    // const { match, children, location } = this.props;
    const { form, active: { bookList }, loading } = this.props;
    const IconText = ({ type, text }) => (
      <span>
        <Icon type={type} style={{ marginRight: 8 }}/>
        {text}
      </span>
    );
    const loadMore =
      bookList.length > 0 ? (
        <div style={{ textAlign: 'center', marginTop: 16 }}>
          <Button onClick={this.fetchMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
            {loading ? (
              <span>
                <Icon type="loading"/> 加载中...
              </span>
            ) : (
              '加载更多'
            )}
          </Button>
        </div>
      ) : null;
    const mainSearch = (
      <div style={{textAlign: 'center'}}>
        <Input.Search
          placeholder="请输入"
          enterButton="搜索"
          size="large"
          onSearch={this.handleFormSubmit}
          style={{width: 522}}
        />
      </div>
    );
    return (
      <PageHeaderWrapper
        title="报名列表"
      >
        <Card
          style={{ marginTop: 24 }}
          bordered={false}
          bodyStyle={{ padding: '8px 32px 32px 32px' }}
        >
          <div className={styles.tableList}>
            {/*<div className={styles.tableListForm}>{this.renderBookForm()}</div>*/}
            <div className={styles.tableListOperator} style={{"marginBottom":"15px"}}>
              <Button icon="plus" type="primary" onClick={() => this.downExcel()}>
                下载
              </Button>
            </div>
            <Table
              loading={loading}
              dataSource={bookList}
              columns={bookColumns}
              pagination={false}
              onChange={this.handleStandardTableChange}
            />
          </div>

        </Card>
      </PageHeaderWrapper>
    );
  }
}
